<template>
  <div>
    sss
    <div class="article-content" ref="articleContent">
      <h1>asdfa</h1>
      <h1>dfdsa</h1>
      <h2>wefw</h2>
      <h2>wefw</h2>
    </div>
    <div class="toc"></div>
  </div>
</template>

<script>
import tocbot from "tocbot";
import {marked} from "marked";

export default {
  name: "Test",
  methods: {},
  data() {
    return {
      aa: {
        nickname: "君役",
        intro: "因为喜欢你，所以想继续相信下去。",
        version: "0.1.1",
        avatar: "http://120.24.182.34:8888/group1/M00/00/00/rBg1pmKiqNGANC0cAABSRM45aq4564.png",
        bj: "background: url(http://120.24.182.34:8888/group1/M00/00/00/rBg1pmKowIaAbhI0AAPLtm4qgA0647.png)",
        runTime: "Sat Jun 11 2022 18:02:16 GMT+0800",
        updateTime: "Sat Jun 11 2022 18:02:16 GMT+0800",
        updateDay: 1,
        relations: [
          {
            name: "gitee",
            iconfont: "icon-gitee-fill-round",
            hint: "已开源",
            path: "https://gitee.com/wj2811/self-blog"
          }, {
            name: "qq",
            iconfont: "icon-logo-qq",
            hint: "2811724301",
            path: "http://wpa.qq.com/msgrd?v=3&uin=2811724301&site=qq&menu=yes"
          },
          {
            name: "github", "iconfont": "icon-github", "hint": "暂未开放", "path": ""
          }
        ]
      }
    }
  },
  mounted() {
    console.log(JSON.stringify(this.aa))
  }
}
</script>

<style scoped>
.down {
  color: white;
  font-size: 30px;
  animation: downAnimation 1s infinite;
}

@keyframes downAnimation {
  0% {
    position: relative;
    top: 10px;
    opacity: 0.4;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
  width: 100%;
}
</style>